<template>
  <p style="color:rgba(121, 121, 121, 0.4)">其他管理/权限管理/栏目管理</p>
  <el-card>
    <p style="font-size: 20px;font-weight: bolder">栏目管理</p>
  <el-row>
    <el-col :span="12"><div class="grid-content ep-bg-purple" />
      <el-button type="primary" @click="dialogTableVisible = true">添加父节点</el-button>
      <el-dialog v-model="dialogTableVisible" title="添加父节点">
        <el-form :model="form">
          <el-form-item label="节点中文名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="节点英文名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="页面地址" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="接口路径" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="排序号" :label-width="formLabelWidth">
            <el-input v-model="form.region" placeholder="数字越大排序越靠前">
            </el-input>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer" label-position="center">
         <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </span>
        </template>
      </el-dialog>
      <ul>
        <li>首页</li>
        <li>会员</li>
        <li>柜机</li>
        <li>包裹</li>
        <li>活动</li>
        <li>财务</li>
        <li>其他</li>
        <li>系统配置
          <ul>
            <li>广告投放</li>
            <li>广播公告</li>
            <li>帮助中心</li>
            <li>意见反馈</li>
            <li>权限管理</li>
            <li>栏目管理</li>
            <li>角色管理</li>
            <li>查询</li>
            <li>修改</li>
            <li>删除</li>
            <li>分配资源</li>
            <li>子帐号管理</li>
            <li>帐号设置</li>
          </ul>
        </li>
      </ul>
    </el-col>
<!--  右边  -->
    <el-col :span="6"><div class="grid-content ep-bg-purple-light" />
      <el-button @click="dialogFormVisible = true">添加子节点</el-button>
      <el-dialog v-model="dialogFormVisible" title="添加子节点">
        <p>父节点   父节点名称</p>
        <el-form :model="form">
          <el-form-item label="节点中文名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="节点英文名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="页面地址" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="接口路径" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="排序号" :label-width="formLabelWidth">
            <el-input v-model="form.region" placeholder="数字越大排序越靠前">
            </el-input>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer" label-position="center">
         <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </span>
        </template>
      </el-dialog>
    </el-col>

    <el-col :span="6">
<!--      修改-->
      <el-button @click="dialogModifyVisible = true">修改</el-button>
      <el-dialog v-model="dialogModifyVisible" title="编辑权限">
        <p>父节点   权限管理</p>
        <el-form :model="form">
          <el-form-item label="节点中文名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="角色管理"/>
          </el-form-item>
          <el-form-item label="节点英文名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="Role"/>
          </el-form-item>
          <el-form-item label="页面地址" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="/ sys / role / list"/>
          </el-form-item>
          <el-form-item label="接口路径" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="sys:role"/>
          </el-form-item>
          <el-form-item label="排序号" :label-width="formLabelWidth">
            <el-input v-model="form.region" placeholder="2">
            </el-input>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer" label-position="center">
         <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </span>
        </template>
      </el-dialog>


<!--删除-->
      <el-button text @click="centerDialogVisible=true">
        删除
      </el-button>

      <el-dialog v-model="centerDialogVisible" title="提示" width="30%" center>
    <span>
     您确认要删除xxx节点吗?
    </span>
        <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible=false">
          确认
        </el-button>
        <el-button @click="centerDialogVisible=false">取消</el-button>

      </span>
        </template>
      </el-dialog>
    </el-col>

  </el-row>
  </el-card>
</template>




<script setup>
import {reactive, ref} from "vue";

let dialogModifyVisible=ref(false)
let dialogTableVisible=ref(false)
let dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const centerDialogVisible = ref(false)



const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const gridData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-03',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },


]




</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>


